<template>
    <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import filter from "@/filter/filterForService"

export default {
    name: "AddImageLayer.component",
    components: {Maptalks},
    setup() {

        let mapOnLoadCB = (map, mapUtil) => {
            mapUtil.setView([
                [-0.11854216406254636, 51.50043810048564],
                [-0.09081885168461667, 51.50994770979011],
                [-0.10343596289067136, 51.50797115663946],
                [-0.07897421667485105, 51.51876102463089]
            ])

            let layer = new maptalks.VectorLayer(MapLayerConst.MAP_IMAGE_LAYER).addTo(map)
            let imageLayer = new maptalks.ImageLayer(layer, [
                {
                    url: filter("relativePath2Img")("image1.png"),
                    extent: [-0.11854216406254636, 51.50043810048564, -0.09081885168461667, 51.50994770979011],
                    opacity: 1
                },
                {
                    url: filter("relativePath2Img")("image2.png"),
                    extent: [-0.10343596289067136, 51.50797115663946, -0.07897421667485105, 51.51876102463089],
                    opacity: 1
                }
            ]);

            map.addLayer(imageLayer);
        };

        return {
            mapOnLoadCB
        }
    }
}
</script>

<style scoped>

</style>
